<template>
	<!-- 图书查询 -->
	<view class="sharedBookstore_bookSearchbox">
		<view class="w-full h-[76rpx] pb-[13rpx] px-4 flex items-end box-border">
			<view
				class="w-full flex items-center justify-between h-[63rpx] rounded-[30rpx] pl-[37rpx] pr-[22rpx] box-border"
				style="background: #f3f3f5"
			>
				<view class="flex-1 h-full box-border pr-4">
					<input
						@input="input"
						:value="search_context"
						placeholder="请输入书名"
						class="h-full py-[15rpx] text-[#303030] text-[30rpx] box-border"
						type="text"
					/>
				</view>
				<image :src="baseImg + '/book/book-search.png'" class="w-[30rpx] h-[30rpx]"></image>
			</view>
		</view>
		<!-- 默认显示 -->
		<view class="px-[37rpx] sharedBookstore_bookSearchbox_defaultBox" v-if="!search_context">
			<view
				class="w-full h-[40rpx] text-[30rpx] text-[#3B3B3B] mt-[20rpx] mb-[40rpx]"
				style="line-height: 40rpx"
				>大家都在读</view
			>
			<scroll-view
				class="w-full h-full box-border"
				scroll-y
				v-if="thisPage === 1 && list.length"
				@scrolltolower="scrolltolower"
			>
				<view
					class="w-full mb-[40rpx]"
					style="display: block; float: left"
					v-for="(item, index) in list"
					:key="index"
				>
					<view class="w-[37rpx] h-[45rpx]" style="float: left">
						<image
							class="w-full h-full"
							:src="baseImg + '/BorrowingCard/hotIcon.png'"
							v-if="index == 0 || index == 1 || index == 2"
						/>
						<text
							class="h-[45rpx] w-[37rpx] text-center text-[#303030] text-[30rpx]"
							style="float: left; line-height: 45rpx"
							v-else
							>{{ index + 1 }}</text
						>
					</view>
					<view
						class="sharedBookstore_bookSearchbox_defaultBox_name"
						@tap="getDetail(item.book_name)"
						>{{ item.book_name }}</view
					>
					<view class="text-[#ABABAB] sharedBookstore_bookSearchbox_defaultBox_right"
						>已借阅<text
							:class="index == 0 || index == 1 || index == 2 ? 'text-[#F9BE20]' : 'text-[#303030]'"
							>{{ item.borrow_amount }}</text
						>次</view
					>
				</view>
			</scroll-view>
			<no-page
				v-if="(thisPage === 0 || (thisPage === 1 && !list.length)) && !search_context"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>
		<!-- 搜索结果 -->
		<view class="px-[37rpx] sharedBookstore_bookSearchbox_searchBox" v-if="search_context">
			<scroll-view
				class="w-full h-full box-border pt-[30rpx]"
				scroll-y
				v-if="thisPage === 1 && list.length"
				@scrolltolower="scrolltolower"
			>
				<view
					class="w-full rounded-[30rpx] mb-[30rpx] box-border bg-white plan-item pt-[20rpx] pb-[27rpx] px-[30rpx]"
					style="display: block; float: left"
					v-for="(item, index) in list"
					:key="index"
				>
					<view class="sharedBookstore_bookSearchbox_searchBox_left">
						<text class="w-full text-[30rpx] text-[#303030]">《{{ item.bookname }}》</text>
						<text class="w-full text-[26rpx] text-[#919191] mt-[10rpx]"
							>{{ item.author }} 著/编
						</text>
						<!-- <text class="w-full text-[26rpx] text-[#919191] mt-[10rpx]">馆藏 分类：儿童文学</text> -->
					</view>
					<view class="sharedBookstore_bookSearchbox_searchBox_right">
						<!-- 可借阅 -->
						<view
							class="bg-[#2BA5E0] h-[50rpx] text-center text-[26rpx] text-[#ffffff] rounded-[50rpx] mt-[44rpx]"
							style="line-height: 50rpx"
							v-if="item.status == 1"
							>可借阅</view
						>
						<view
							class="bg-[#D6EDF8] h-[50rpx] text-center text-[26rpx] text-[#ffffff] rounded-[50rpx] mt-[44rpx]"
							style="line-height: 50rpx"
							v-if="item.status != 1"
							>已借完</view
						>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="(thisPage === 0 || (thisPage === 1 && !list.length)) && search_context"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getAllReadList, getSearchRecordsList } from '@/service/shareBookStore';
import { useUserStore } from '@/store';
import { debounce } from '@/utils';
import { storeToRefs } from 'pinia';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const search_context = ref('');
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const list = ref([]);

onShow(() => {
	getList();
});

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = () => {
	if (search_context.value.trim() === '') {
		getHistory();
		return;
	}
	inputList();
};

const getHistory = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getAllReadList({
			student_id: userInfo.value.student_id,
			page: page.value.number,
			pagesize: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			list.value =
				page.value.number === 1 ? res.data.book_list : [...list.value, ...res.data.book_list];
			if (res.data.book_list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!list.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};
const inputList = async () => {
	uni.showLoading({ title: '加载中...' });
	// console.log('====>inputList', event);
	try {
		const res = await getSearchRecordsList({
			student_id: userInfo.value.student_id,
			content: search_context.value,
			page: page.value.number,
			pagesize: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			list.value = page.value.number === 1 ? res.data.data : [...list.value, ...res.data.data];
			if (res.data.data.length < page.value.size) {
				hasMore.value = false;
			}
			if (!list.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		console.log('===>error', error);
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};
const getDetail = async (content: string = '') => {
	if (!content) return;
	search_context.value = content;
	list.value = [];
	thisPage.value = -1;
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
const input = debounce(e => {
	// 防抖
	search_context.value = e.detail.value;
	getList();
}, 500);

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
defineExpose({
	getList,
});
</script>

<style lang="scss" scoped></style>
